<template>
  <div class="app-container">
    <aside>Ansible Playbook 执行</aside>
    <el-form>
        <el-card>
      <el-row style="">
        <el-col :span="8">
        <span style="color: gray">选择执行的主机组</span><br><br>
        <el-select v-model="group" size="medium" multiple placeholder="选择主机组" value-key="id" @change="group_to_hosts" style="width:95%">
          <el-option
            v-for="item in groups"
            :key="item.id"
            :label="item.nickName"
            :value="item">
          </el-option>
        </el-select><br>
        <el-button type="text" @click="centerDialogVisible = true">查看选择执行主机列表</el-button>
        </el-col>
        <el-col :span="8">
          <span style="color: gray">选择PlayBook</span><br><br>
          <el-select v-model="playbook" value-key="id" size="medium"  @change="change_playbook_id" placeholder="选择PlayBook" style="width:95%">
            <el-option
              v-for="item in playbooks"
              :key="item.id"
              :label="item.nickName"
              :value="item">
            </el-option>
          </el-select><br>
          <el-button type="text" @click="show_playbook_content(playbook_id)">查看 PlayBook 内容</el-button>
        </el-col>
        <el-col :span="8">
              <span style="color: gray">选择执行的功能</span><br><br>
              <el-select v-model="execFunc" size="medium" placeholder="选择功能" style="width:95%">
                <el-option
                  v-for="item in functions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>  
        </el-col><br>
        
        <el-col>
          <el-divider></el-divider>
            <span style="color: gray">输入额外参数（yaml 格式）</span><br><br>
            <!-- <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 50}" v-model="extra_vars"></el-input> -->
            <yaml-editor  v-model="extra_vars" />
        </el-col>
      </el-row>
            <el-button type="info" size="small" @click="centerDialogVisible = true">查看选择执行主机列表</el-button>
            <el-button type="success" size="small" @click="show_playbook_content(playbook_id)">查看 PlayBook 内容</el-button>
            <el-button type="primary" size="small" icon="el-icon-thumb" @click="push_task">提交</el-button>
        </el-card><br>
      
           
    </el-form>

    <el-dialog
      title="执行主机列表"
      :visible.sync="centerDialogVisible"
      width="60%"
      center>
          <div class="grid-content bg-purple-light" style="min-height:72px;">
          <el-tag v-for="tag in host_select_list" :key="tag.ip" closable   :disable-transitions="false">
            {{tag.hostname}}
          </el-tag>
          </div>
    </el-dialog>
      <el-dialog
      title="playbook 内容"
      :visible.sync="playbook_show"
      width="60%"
      center>
        <yaml-editor  v-model="playbook_content" />
    </el-dialog>

  </div>
</template>

<script>
import { fetchList } from '@/api/ansibleui'
import Sortable from 'sortablejs'
import Axios from 'axios'
import YamlEditor from '@/components/yamlEditor'

export default {
  name: 'DragTable',
  components: { YamlEditor },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      playbook_show: false,
      centerDialogVisible: false,
      extra_vars: "",
      playbook_id: null,
      playbook_content: '',
      host_select_list: [],
      group: '',
      groups: [],
      playbook: '',
      playbooks: [],
      execFunc: '',
      functions: [
        {'name': '检测语法'},
        {'name': '检测执行'},
        {'name': '检测执行主机列表'},
        {'name': '执行 PlayBook'},
      ],
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      sortable: null,
      oldList: [],
      newList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    push_task(){
        // 提交任务
        var playbook_name = this.playbook.playbook
        var group_select = this.group.map(x => x['groupName'])
        Axios.post(this.$root.baseUrl+'/taskpush/', {
          playbook: playbook_name,
          groupName: group_select,
          extra_vars: this.extra_vars
        }).then(resp => {
          console.log(resp)
          this.$router.push('/ansible/task_detail/'+resp.data.id)
        })
        this.$message({
          message: 'PlayBook: ' + playbook_name + '\nGroupName：'  +  group_select + '额外参数：' + this.extra_vars,
          center: true,
          type: 'warning'
        });
    },
    change_playbook_id(items){
      // console.log(JSON.stringify(items))
      console.log(items,)
      this.playbook_id = items.id
    },
    show_playbook_content(id){
      if(id){
        console.log(this.$root.baseUrl+'/playbook/content/'+ id +'/')
        Axios.get(this.$root.baseUrl+'/playbook/content/'+ id +'/').then(resp => {
          this.playbook_content = resp.data.content
          this.playbook_show = true
        })
      }

    },
    group_to_hosts(items){
      var tmp = []
      for(var i in items){
        tmp = tmp.concat(items[i]['hosts'])
      }
      this.host_select_list = tmp
      console.log(this.host_select_list)
    },
    async getList() {
      this.listLoading = true


      var playbooks = await fetchList('playbooks', {})
      this.playbooks = playbooks.data.items

      var groups  = await fetchList('groups', {})
      console.log(groups)
      this.groups = groups.data.items
    },

  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
